<template>
  <div>
    <div class="listerGroup">
      <!-- 展示基本信息 -->
      <div class="lister">
        <div class="subList">
          <div class="subListTitle">机构名称</div>
          <div class="subListCont">{{ info.officeName }}</div>
        </div>
        <div class="subList">
          <div class="subListTitle">服务商编号</div>
          <div class="subListCont">{{ info.hkproCode }}</div>
        </div>
      </div>
      <div class="lister">
        <div class="subList">
          <div class="subListTitle">机构类型</div>
          <div class="subListCont">
            <span v-if="info.agtType == 0">OEM</span>
            <span v-if="info.agtType == 1">普通代理</span>
            <span v-if="info.agtType == 3">渠道机构</span>
            <span v-if="info.agtType == 9">总机构</span>
          </div>
        </div>
        <div class="subList">
          <div class="subListTitle">法人姓名</div>
          <div class="subListCont">{{ info.master }}</div>
        </div>
      </div>
      <!-- 实名状态 已实名的时候展示 -->
      <div class="lister" v-if="realInfo == 0">
        <div class="subList">
          <div class="subListTitle">法人身份证号</div>
          <div class="subListCont">{{ info.legalPersonIdCard }}</div>
        </div>
        <div class="subList">
          <div class="subListTitle">营业执照号</div>
          <div class="subListCont">{{ info.organizCode }}</div>
        </div>
      </div>
      <!-- /////////////////////////// -->

      <div class="lister">
        <div class="subList">
          <div class="subListTitle">实名状态</div>
          <div class="subListCont">
            <span v-if="realInfo == 0">实名</span>
            <span v-if="realInfo == 1"
              >您尚未完成实名认证，<span class="goNameTxt" @click="goName"
                >去实名</span
              ></span
            >
          </div>
        </div>
        <div class="subList">
          <div class="subListTitle">邀请码</div>
          <div class="subListCont">{{ info.developCode }}</div>
        </div>
      </div>
      <div class="lister">
        <div class="subList">
          <div class="subListTitle">登录手机号</div>
          <div class="subListCont">{{ info.phone }}</div>
        </div>
        <div class="subList">
          <div class="subListTitle">邮箱</div>
          <div class="subListCont">{{ info.email }}</div>
        </div>
      </div>
      <div class="lister">
        <div
          class="subList"
          style="width: 100%; border-bottom: 1px solid #c0c4cc"
        >
          <div class="subListTitle">联系地址</div>
          <div class="subListCont">
            {{ info.provinceName }}{{ info.cityName }}{{ info.countryName
            }}{{ info.address }}
          </div>
        </div>
      </div>
      <!-- 实名了才有营业范围 -->
      <div class="lister" v-if="realInfo == 0">
        <div
          class="subList"
          style="width: 100%; border-bottom: 1px solid #c0c4cc; border-top: 0"
        >
          <div class="subListTitle" style="height: 120px">营业范围</div>
          <div
            class="subListCont fanwei ellipsis"
            style="height: 120px; line-height: 24px; padding-right: 15px"
          >
            {{ info.mccCont }}
          </div>
        </div>
      </div>
    </div>
    <!-- 如果实名了的话 -->
    <div>
      <div class="picGroup">
        <div class="public" v-if="info.accountType && info.accountType == 1">
          <div class="title">资质照片(对公)</div>
          <div class="flex">
            <div style="margin-right: 20px">
              <div class="pic">
                <div class="pic1">
                  <el-image
                  class="biggerPic"
                    style="width: 100%; height: 100%"
                    :src="info.busLicencePho"
                    :preview-src-list="[info.busLicencePho]"
                  >
                  </el-image>
                  <!-- <img :src="info.busLicencePho" style="width:100%;height:100%" alt=""> -->
                </div>
              </div>
              <div class="subTtitle">营业执照</div>
            </div>
            <div style="margin-right: 20px">
              <div class="pic">
                <div class="pic1">
                  <el-image
                  class="biggerPic"
                    style="width: 100%; height: 100%"
                    :src="info.openAccPho"
                    :preview-src-list="[info.openAccPho]"
                  >
                  </el-image>
                  <!-- <img
                    :src="info.openAccPho"
                    style="width: 100%; height: 100%"
                    alt=""
                  /> -->
                </div>
              </div>
              <div class="subTtitle">开户许可证</div>
            </div>
            <div style="margin-right: 20px">
              <div class="pic">
                <div class="pic1">
                  <el-image
                  class="biggerPic"
                    style="width: 100%; height: 100%"
                    :src="info.legalCertFrontPho"
                    :preview-src-list="[info.legalCertFrontPho]"
                  >
                  </el-image>
                  <!-- <img
                    :src="info.legalCertFrontPho"
                    style="width: 100%; height: 100%"
                    alt=""
                  /> -->
                </div>
              </div>
              <div class="subTtitle">法人身份证正面</div>
            </div>
            <div style="margin-right: 20px">
              <div class="pic">
                <div class="pic1">
                  <el-image
                  class="biggerPic"
                    style="width: 100%; height: 100%"
                    :src="info.legalCertBackPho"
                    :preview-src-list="[info.legalCertBackPho]"
                  >
                  </el-image>

                  <!-- <img
                    :src="info.legalCertBackPho"
                    style="width: 100%; height: 100%"
                    alt=""
                  /> -->
                </div>
              </div>
              <div class="subTtitle">法人身份证反面</div>
            </div>
          </div>
        </div>
        <!-- 对私 -->
        <div class="public" v-if="info.accountType && info.accountType == 2">
          <div class="title">资质照片(对私)</div>
          <div class="flex">
            <div style="margin-right: 20px">
              <div class="pic">
                <div class="pic1">
                  <el-image
                  class="biggerPic"
                    style="width: 100%; height: 100%"
                    :src="info.legalCertFrontPho"
                    :preview-src-list="[info.legalCertFrontPho]"
                  >
                  </el-image>
                  <!-- <img
                    :src="info.legalCertFrontPho"
                    style="width: 100%; height: 100%"
                    alt=""
                  /> -->
                </div>
              </div>
              <div class="subTtitle">身份证正面照</div>
            </div>
            <div style="margin-right: 20px">
              <div class="pic">
                <div class="pic1">
                  <el-image
                  class="biggerPic"
                    style="width: 100%; height: 100%"
                    :src="info.legalCertBackPho"
                    :preview-src-list="[info.legalCertBackPho]"
                  >
                  </el-image>
                  <!-- <img
                    :src="info.legalCertBackPho"
                    style="width: 100%; height: 100%"
                    alt=""
                  /> -->
                </div>
              </div>
              <div class="subTtitle">身份证反面照</div>
            </div>
            <div style="margin-right: 20px">
              <div class="pic">
                <div class="pic1">
                  <el-image
                  class="biggerPic"
                    style="width: 100%; height: 100%"
                    :src="info.bankCardPho"
                    :preview-src-list="[info.bankCardPho]"
                  >
                  </el-image>
                  <!-- <img
                    :src="info.bankCardPho"
                    style="width: 100%; height: 100%"
                    alt=""
                  /> -->
                </div>
              </div>
              <div class="subTtitle">银行卡照片</div>
            </div>
            <div style="margin-right: 20px">
              <div class="pic">
                <div class="pic1">
                  <el-image
                  class="biggerPic"
                    style="width: 100%; height: 100%"
                    :src="info.certBody"
                    :preview-src-list="[info.certBody]"
                  >
                  </el-image>
                  <!-- <img
                    :src="info.certBody"
                    style="width: 100%; height: 100%"
                    alt=""
                  /> -->
                </div>
              </div>
              <div class="subTtitle">手持身份证正面照</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import https from "../../../plugins/https";
export default {
  data() {
    return {
      info: "",
      realInfo: "",
    };
  },
  created() {
    this.realInfo = localStorage.getItem("authenticationStatus");
    this.getData();
  },
  methods: {
    // 跳转实名页面
    goName() {
      this.$router.push({
        name: "meInfo",
        query: {
          requestType: "1",
        },
      });
    },
    getData() {
      let officeUid = localStorage.getItem("uid");
      https
        .getUpdateOfficeInfo({ officeUid })
        .then((res) => {
          console.log("基本信息");
          console.log(res);
          this.info = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.lister {
  display: flex;
}
.lister .subList:last-of-type {
  border-right: 1px solid #c0c4cc;
}
.subList {
  display: flex;
  width: 50%;
  border-top: 1px solid #c0c4cc;
  border-left: 1px solid #c0c4cc;
}
.subListTitle {
  width: 230px;
  border-right: 1px solid #c0c4cc;
  height: 36px;
  line-height: 36px;
  box-sizing: border-box;
  background-color: #ebeef5;
  padding-left: 15px;
}
.subListCont {
  height: 36px;
  line-height: 30px;
  box-sizing: border-box;
  padding-left: 15px;
}
.pic {
  padding: 20px;
  border: 1px dashed #ccc;
}
.pic1 {
  width: 127px;
  height: 72px;
  background-color: palevioletred;
}
.flex {
  display: flex;
}
.ellipsis {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;

  -webkit-box-orient: vertical;
}
.fanwei {
  width: calc(100% - 242px);
}
.title {
  font-size: 16px;
  color: #303133;
  font-family: "MicrosoftYaHei";
  padding: 20px 0;
}
.subTtitle {
  text-align: center;
  margin-top: 8px;
  color: #909399;
}
.goNameTxt {
  color: #409eff;
  cursor: pointer;
}
/deep/ .biggerPic .el-icon-circle-close{
  transform: scale(2);
}
</style>